<template>
  <div class="touch">
    <div class="touchBox">
      <div class="main infinite-list-wrapper" style="overflow:auto">
        <h5 class="selectTitle">精选</h5>
        <ul class="conBox selectBox">
          <!-- v-infinite-scroll="load" infinite-scroll-disabled="disabled" -->
          <li v-for="(item,index) in  articleList" :key="index">
            <div class="userInfoBox">
              <img :src="item.imgUrl" />
              <div class="userInfo">
                <div class="user">
                  <span>{{item.name}}</span>
                  <div class="levelBox">
                    <div class="level" v-if="item.level">Lv.{{item.level}}</div>
                  </div>
                </div>
                <p>{{item.job}}</p>
              </div>
            </div>
            <div class="foldPanelBox">
              <div class="foldPanel">
                <div class="tab">
                  <div class="tabTitle">{{activeNames[index]}}</div>
                  <span
                      class="showPanel"
                      @click="showPanel(index)"
                      v-if="activeNames[index].length>120"
                  >
                    <span>展开</span>
                    <i :class="slideClassName" class="panelIcon"></i>
                  </span>
                </div>
                <div class="contents" v-html="item.article"></div>
              </div>
            </div>
            <div class="topicBox" @click="goDetail(item.topicLink)">
              <span>#</span>
              <a>{{item.topic}}</a>
            </div>
            <div class="operateBox">
              <span>
                <i class="el-icon-thumb"></i>
                {{item.zan}}
              </span>
              <span>
                <i class="el-icon-s-comment"></i>
                {{item.comment}}
              </span>
              <span>
                <i class="el-icon-share"></i>
                {{item.share}}
              </span>
              <span>
                <i class="el-icon-finished"></i>
                {{item.get}}
              </span>
            </div>
          </li>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </ul>
      </div>
      <div class="aside">
        <div class="hot">
          <h5>
            <span class="hotTitle">今日问题热榜</span>
            <el-pagination
                :page-size="pageSize"
                :currentPage.sync="currentPage"
                :total="total"
                layout="prev, next"
                @current-change="handleCurrentChange()"
            ></el-pagination>
          </h5>
          <ul class="conBox">
            <li
                v-for="(item,index) in  hotList"
                :key="index"
                :isLeft="true"
                :isRight="true"
                :className="true"
            >
              <div class="random">{{item.id}}</div>
              {{item.title}}
            </li>
          </ul>
        </div>
        <div class="recommend">
          <h5>
            <span>推荐关注</span>
            <div class="recommendTitle" @click="recommendRefresh()">
              <i class="el-icon-refresh"></i>
              换一批
            </div>
          </h5>
          <ul class="conBox">
            <li v-for="(item,index) in  recommendList" :key="index">
              <img :src="item.imgUrl" alt />
              <div>
                <p class="recommendName">{{item.name}}</p>
                <p>{{item.produce}}</p>
                <p class="recommendInfo">
                  <i :class="item.className"></i>
                  {{item.showAction}}
                </p>
                <!-- type: "focus/"recommend/"actively/"recently""/" -->
              </div>
            </li>
          </ul>
          <div class="btns">
            <button type="button">《有了社区公约》</button>
            <button type="button">申请成为认证作者</button>
          </div>
        </div>
      </div>
    </div>
    <el-backtop :bottom="100">
      <div class="el-icon-arrow-up">
        <span>TOP</span>
      </div>
    </el-backtop>
  </div>
</template>

<script>
import {
  getNavData,
  getTouchArticleList,
  getTouchHotList,
  getTouchRecommendList,
  getData
} from "@/api";

export default {
  name: "InTc",
  data() {
    return {
      articleList: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      hotList: [],
      hotDataList: [],
      recommendList: [],
      recommendDataList: [],
      hotObj: {},
      value: '',
      activeNames: [],
      slideClassName: 'el-icon-caret-bottom',
      loading: false,
      // noMore:false,
      count: 0,//起始页数值为0
      loading: false,
      totalPages: "",//取后端返回内容的总页数
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.count >= this.totalPages - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created() {
    this.getMessage();
  },
  created() {
    // getTouchArticleList()
    getData('/api/ta').then(res => {
      console.log("article", res);
      this.articleList = res.data.data;
      this.articleList.map((item, index) => {
        // console.log('item',index, item.article.slice(0,6));
        if (item.article.length > 130) {
          this.activeNames[index] = item.article.replace(/<\/br>/gi, "").slice(0, 130);
        } else {
          this.activeNames[index] = item.article;
        }
      })
      // console.log('articleList', this.articleList[0].article.replace(/<\/br>/gi, ""));
      // console.log('titles', this.activeNames);
    });

    // getTouchHotList()
    getData("/api/thot").then(res => {//'/api/thot'
      console.log("hot", res);
      this.hotDataList = res.data.data;
      this.total = this.hotDataList.length;
      this.handleCurrentChange();
    });

    // getTouchRecommendList()
    getData('/api/tr').then(res => {
      console.log("recommend", res);
      const data = res.data.data;
      data.map(item => {
        switch (item.type) {
          case 'recently':
            item.className = 'el-icon-sort';
            break;
          case 'focus':
            item.className = 'el-icon-s-flag';
            break;
          case 'recommend':
            item.className = 'el-icon-check';
            break;
          default:
            item.className = '';
        }
      })
      console.log('data', data);
      this.recommendDataList = data;
      this.recommendRefresh();
    })
  },
  methods: {
    // 折叠面板 - 显示隐藏
    showPanel(index) {
      const btns = document.getElementsByClassName('showPanel');
      const tabs = document.getElementsByClassName('tabTitle');
      const contents = document.getElementsByClassName('contents');
      if (this.slideClassName === 'el-icon-caret-bottom') {
        this.slideClassName = 'el-icon-caret-top';
        tabs[index].innerText = '';
        contents[index].style.display = 'block';
      } else {
        this.slideClassName = 'el-icon-caret-bottom';
        if (this.activeNames[index].length > 130) {
          tabs[index].innerText = this.activeNames[index].replace(/<\/br>/gi, "").slice(0, 130);
        } else {
          tabs[index].innerText = this.activeNames[index];
        }
        contents[index].style.display = 'none';
      }
      console.log('1111', this.slideClassName, tabs[index]);
    },

    // 处理问题热点分页
    handleCurrentChange() {
      console.log('cur', this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage);
      this.hotList = this.hotDataList.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage);
      console.log('hotList', this.hotList);
    },

    // 换一批效果
    recommendRefresh() {
      const num = this.randomNum(0, this.recommendDataList.length);
      this.recommendList = this.recommendDataList.slice(num, num + 5);
    },
    // 随机生成一个数
    randomNum(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    },

    // 页面滚动
    scrollFn() {
      const titleTop = document.querySelector('.selectTitle');
      const hotTop = document.querySelector('.hot');
      const top = document.querySelector('.recommend');
      window.addEventListener('scroll', (e) => {
        // console.log(titleTop.offsetTop,e.path[1].scrollY)
        // console.log(e.path[1].scrollY, hotTop.offsetHeight,top.offsetTop)
        if (parseInt(e.path[1].scrollY) <= top.offsetHeight) {
          top.style.cssText = `
                          position:static;
                          top:10px;
                        `
        } else {
          top.style.cssText = `
                          position:fixed;
                          top:60px;
                        `
        }
        if (parseInt(e.path[1].scrollY) >= titleTop.offsetTop) {
          titleTop.style.cssText = `
                                    position:fixed;
                                    top:60px;
                                    z-index:2;
                                   `
        } else {
          titleTop.style.cssText = `
                                    position:static;
                                   `
        }
      })
    },

    // 无限滚动
    load() {
      //滑到底部时进行加载
      this.loading = true;
      setTimeout(() => {
        this.count += 1; //页数+1
        this.getMessage(); //调用接口，此时页数+1，查询下一页数据
      }, 2000);
    },
    getMessage() {
      let params = {
        pageNumber: this.count,
        pageSize: 10 //每页查询条数
      };
      this.$axios
          .post(
              "https://接口",
              params
          )
          .then(res => {
            console.log(res);
            this.list = this.list.concat(res.data.body.content); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
            this.totalPages = res.data.body.totalPages;
            this.loading = false;
          })
          .catch(err => {
            console.log(err);
          });
    }
  },
  mounted() {
    this.scrollFn();
  },
  updated() {
    const tabs = document.getElementsByClassName("el-collapse-item__header");
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].style.cssText = `
        height: auto;
        line-height: 24px;
        padding-bottom: 20px;
      `;
    };
  }
};
</script>
<style lang="less" scoped>
.tabHeight {
  height: 168px !important;
  line-height: 28px;
  background-color: lightgreen !important;
}
.touch {
  .el-backtop {
    width: 52px;
    height: 48px;
    color: #45474d;
    border-radius: 8px;
    background-color: #fff;
    .el-icon-arrow-up {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      font-size: 10px;
      &::before {
        font-size: 18px;
        font-weight: 900;
      }
    }
    &:hover {
      color: #fff;
      background: #18c3b1;
      // .el-icon-arrow-up {
      //   color: #fff;
      //   background: #18c3b1;
      // }
    }
  }
  padding-top: 10px;
  background-color: #f7f8fa;
  .touchBox {
    width: 1010px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .conBox {
      background-color: #fff;
      li {
        .random {
          margin-right: 14px;
          display: inline-block;
        }
        &:first-child {
          .random {
            color: #d9000c;
          }
        }
        &:nth-child(2) {
          .random {
            color: #f55e3d;
          }
        }
        &:nth-child(3) {
          .random {
            color: #ff9828;
          }
        }
      }
    }
    .selectBox {
      // height: 1000px;
    }
    .main {
      width: 700px;
      & > h5 {
        box-sizing: border-box;
        padding: 0 24px;
        width: 700px;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        color: #00b8bf;
        font-weight: normal;
        border-radius: 8px 8px 0 0;
        background-color: #fff;
        border-bottom: 1px solid #ebedf0;
      }
      ul {
        padding: 0 24px;
        overflow: hidden;
        li
          // .conBox
        {
          padding: 24px 0;
          border-bottom: 1px solid #ebedf0;
          .userInfoBox {
            padding: 24px 0;
            display: flex;
            align-items: center;
            height: 42px;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              &:hover {
                box-shadow: 0 0 1px 3px #d9dee6;
              }
            }
            .userInfo {
              margin-left: 12px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .user {
                display: flex;
                .userName {
                  margin-right: 10px;
                  cursor: pointer;
                  font-size: 14px;
                }
                .levelBox {
                  .level {
                    padding-right: 6px;
                    box-sizing: border-box;
                    width: 47px;
                    height: 20px;
                    line-height: 20px;
                    color: #cf8e14;
                    font-size: 10px;
                    text-align: right;
                    background: url(../../assets/images/level.png) no-repeat
                    center center;
                    background-size: 100%;
                  }
                }
              }
              & > p {
                margin-top: 4px;
                line-height: 18px;
                color: #747680;
                font-size: 13px;
              }
            }
            &:first-child {
              padding-top: 0px;
            }
            &:last-child {
              padding-bottom: 0px;
            }
          }
          .foldPanel {
            position: relative;
            line-height: 30px;
            .showPanel {
              position: absolute;
              right: 0;
              bottom: 0;
              width: 52px;
              height: 30px;
              color: #00b8bf;
              &:hover {
                cursor: pointer;
              }
            }
            .tab {
              display: flex;
              .tabTitle {
                // width: 600px;
                // height: auto;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 3;
              }
            }
            .contents {
              display: none;
            }
          }
          .articleBox {
            border: none;
            .card-content {
              background-color: #00b8bf;
              .content-title {
                font-size: 18px;
                font-weight: bold;
                color: #12141a;
                line-height: 25px;
                cursor: pointer;
                &:hover {
                  color: #00b8bf;
                }
              }
              .text-viewer-wrap {
                .text-content {
                  font-size: 15px;
                  line-height: 24px;
                  color: #12141a;
                  .real-text {
                    font-size: 15px;
                    line-height: 24px;
                    color: #12141a;
                  }
                }
              }
            }
          }
          .topicBox {
            margin: 12px 0 0;
            height: 28px;
            display: inline-block;
            box-sizing: border-box;
            padding: 0 12px;
            height: 28px;
            line-height: 28px;
            border-radius: 14px;
            background: #f2f3f5;
            span {
              display: inline-block;
              width: 16px;
              height: 16px;
              line-height: 16px;
              background: #00b8bf;
              color: #fff;
              border-radius: 50%;
              text-align: center;
            }
            a {
              display: inline-flex;
              color: #45474d;
            }
            &:hover {
              cursor: pointer;
            }
          }
          .operateBox {
            margin-top: 16px;
            color: #45474d;
            font-size: 14px;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            color: #5c5e66;
            border: none;
            span {
              display: inline-block;
              margin-right: 6px;
              padding: 0 6px;
              &:hover {
                background: #f2f4f5;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
    .aside {
      h5 {
        box-sizing: border-box;
        padding: 0 24px;
        width: 300px;
        line-height: 44px;
        font-size: 14px;
        color: #00b8bf;
        font-weight: normal;
        border-radius: 8px 8px 0 0;
        background-color: #fff;
        border-bottom: 1px solid #ebedf0;
        display: flex;
        justify-content: space-between;
      }
      ul {
        padding: 10px 8px;
        box-sizing: border-box;
        width: 300px;
        background-color: #fff;
        li {
          padding: 12px 12px;
          box-sizing: border-box;
          width: 284px;
          line-height: 20px;
          font-size: 14px;
          overflow: hidden;
          color: #45474d;
          &:first-child {
            margin-top: 0px;
          }
          &:hover {
            color: #18c3b1;
            background: #f7f8fa;
            border-radius: 10px;
          }
        }
      }
      .hot {
        margin-bottom: 10px;
        min-height: 340px;
        & > h5 {
          box-sizing: border-box;
          padding-left: 18px;
          width: 300px;
          line-height: 44px;
          font-size: 14px;
          color: #00b8bf;
          font-weight: normal;
          border-radius: 8px 8px 0 0;
          background-color: #fff;
          border-bottom: 1px solid #ebedf0;
          display: flex;
          justify-content: space-between;
          span {
            margin-right: 10px;
            text-indent: 24px;
            background: url("../../assets/images/hot.png") no-repeat -4px center;
            background-size: 24px 24px;
          }
          .el-pagination {
            height: 30px;
            align-self: center;
          }
        }
      }
      .recommend {
        margin-top: 10px;
        h5 {
          line-height: 44px;
          span {
            font-size: 18px;
            color: #12141a;
          }
        }
        ul {
          li {
            display: flex;
            width: 100%;
            &:hover {
              background-color: #ddd;
            }
            img {
              margin-right: 10px;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              &:hover {
                box-shadow: 0 0 1px 3px #d9dee6;
              }
            }
            div {
              p {
                color: #747680;
                font-size: 12px;
                line-height: 20px;
                padding: 4px 0;
              }
              .recommendInfo {
                padding: 0 10px;
                background-color: #ddd;
                border-radius: 4px;
              }
            }
          }
        }
        .recommendTitle {
          color: #747680;
          i {
            color: #ff9821;
            font-size: 16px;
          }
          &:hover {
            color: #00b8bf;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
      .btns {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        & > button {
          width: 146px;
          height: 40px;
          font-size: 14px;
          border: none;
          color: #45474d;
          background-color: #fff;
          border-radius: 4px;
          &:hover {
            cursor: pointer;
            color: #fff;
            background-color: #00b8bf;
          }
        }
      }
    }
  }
}
</style>